<template>
  <div class="main_box" style="padding:10px">
    <div class="add_wrap">
      <el-form label-width="200px">
        <div class="tit">
          <h2>基础信息</h2>
          <el-button type="success" plain size="small" icon="fa fa-mail-forward" @click="returnList">返回
          </el-button>
        </div>
        <el-row>
          <el-form-item label="云喇叭名称:">
            <span>{{ dataInfo.name }}</span>
          </el-form-item>
          <el-form-item label="云喇叭类型:">
            <span>{{ dataInfo.type==1?'商户':'平台' }}</span>
          </el-form-item>
          <el-form-item label="云喇叭编号:">
            <span>{{ dataInfo.sn }}</span>
          </el-form-item>
          <el-form-item label="云喇叭状态:">
            <span>
                {{ formatHornState(dataInfo.hornState) }}
            </span>
          </el-form-item>
          <el-form-item label="创建人:">
            <span>{{ dataInfo.createUserName }}</span>
          </el-form-item>
          <el-form-item label="创建时间:">
            <span>{{ dataInfo.createDate }}</span>
          </el-form-item>
          <el-form-item label="修改人:">
            <span>{{ dataInfo.modifyUserName }}</span>
          </el-form-item>
          <el-form-item label="修改时间:">
            <span>{{ dataInfo.modifyDate }}</span>
          </el-form-item>
          <!-- <el-form-item label="备注:">
              <span>{{ dataInfo.remark }}</span>
                    </el-form-item> -->
        </el-row>
        <!-- <div class="tit" v-if="dataInfo.printerType==1">
          <h2>关联商户</h2>
        </div> -->
        <!-- <el-row v-if="dataInfo.printerType==1">
          <el-table :data="dataInfo.list||[]"   style="width:fit-content">
          <el-table-column label="商户" prop="businessName" width="200" align="center">

          </el-table-column>
          <el-table-column label="部门" width="300" align="center">
            <template slot-scope="scope">
              <span>
                {{formatDepartName(scope.row.departId)}}
              </span>
            </template>
          </el-table-column>
        </el-table>
        </el-row> -->

      </el-form>
    </div>
  </div>
</template>

<script>
  import HornApi from '@/api/equip/cloudTrumpet';
  import DepartApi from "@/api/business/depart"
  export default {
    data() {
      return {
        dataInfo: {},
        departList:[]
      };
    },
    computed: {},
    mounted() {
      this.getData()
    },
    methods: {
      async getData() {
        const res = await DepartApi.listMangerTree()
        this.departList = res.data
        const res1 = await HornApi.getHornInfo({id: this.$route.query.id})
        this.dataInfo = res1.data
      },
      formatHornState(cellValue) {
        if (cellValue === 0) {
          return '未激活'
        } else if (cellValue === 1) {
          return '已激活'
        } else if (cellValue === 2) {
          return '在线'
        } else if (cellValue === 3) {
          return '离线'
        } else if (cellValue === 4) {
          return '已注销'
        }
      },
      formatHornStates(cellValue) {
        if (cellValue === 0) {
          return ''
        } else if (cellValue === 1 || cellValue === 2) {
          return 'success'
        } else if (cellValue === 3 || cellValue === 4) {
          return 'info'
        }
      },
      formatDepartName(departId){
        return this.$Utils.filterTreeToArr(this.departList, {departId}, 'departId').map(item=>item.departName).join("/")
      },
      returnList() {
        this.$store.dispatch('delView', this.$route);
        this.$router.push({path: '/equip/cloudTrumpetManagement'})
      }
    },

  }

</script>
<style lang="scss" scoped>
@import "@/assets/css/views/add.scss";
</style>
